web6047　2020年 9月

プログラミングやRPG（作るほう）が好きな人の日記

このホームページは毎日 夜11時にアクセスできなくなります。 朝6時半に再開されます。（世の中のネット依存対策として） 例外で、アクセスができる場合があります。aboutThisWebsite を参照してください。 URL は https でもアクセスできます。 黒猫画像はクリック（タッチ）すると消えます。 NO PC WEEK とは私自身の健康のために私のパソコンの使用を制限する期間です。 【【 私自身へ、記事の先頭に5W1H を書くといいかも 】】

2020/9/30（水）

自作DRAM回路に問題 -[dram]

私が取り組んでいる自作のDRAM回路ですが、「根本的に何かが間違っているのでは」という疑念がわいてきました。

疑念が晴れるまで、DRAMの記事はネットワーク上では削除して、こちらで保管（ローカルコンピューターに保管）しておきます。

2020/9/25（土）

自作DRAM回路 -[dram]

通販で部品を購入したので、とりあえず形だけ作成しました。

8ビット4アドレスのDRAMメモリーです。

しかし、ホントは 10uF のコンデンサを使うはずだったのに、間違えて 1uF を買っていたことに気づきました。

1uF だと PIC マイコンではできるけど、IchigoCake だとできなかったはず…

ガンプラ「RG νガンダム（ニューガンダム）」 -[plamo]

去年の11月だったっけ…「RG νガンダム」を買ったんでした。

それでついこのあいだ、9月の初めだったかな？やっと箱を開けて作り始めました。

今日はその改造の話と、顔のシール貼りの話、それから「装甲のない内部フレームだけの状態での関節可動が、人間に近い」という話をします。

少し改造

この改造には欠陥があるので、参考にしないでください！

RG νガンダムの完成写真を見ていると、私だけかもしれませんが、どうもヒザの付近が気になります。

オリジナル（下図左）のほうはヒザの伸ばしが気持ち足りない気がして、もうちょっと太ももとヒザが寄ってもいいんじゃないかなって（下図右）。

そこで意を決してちょっと微調整することにしました。加工するので改造です。

ただし、問題が発生するので注意してください。（後述）

▼可動域を広げる改造	よく見てみると、ヒザの裏に隠れているシリンダーのオス、メスをそれぞれ短くすることで、太ももをもっとヒザに近づけることができるようです。 シリンダーとは訳すと「筒（つつ）」です。「シリンダー」を画像検索しても期待するものがあまり出てこないので、「シリンダー　油圧」で画像検索してみてください。 （なお、シリンダーの部品についてオスメスという言い方は普通はしないかもしれません） モデルがダメになる事態は避けなければならないので、「充分に慎重に」検討して、そのうえで改造を実行することに決めました。
▼メス　削る前　10.6mm	シリンダーのメスを削る前にノギスで長さを測ったところ、10.6mmでした。 余談ですが、 ノギスの目盛りの見方って、上の目盛りで1mm単位で読み、コンマ以下の端数は切り捨て、下の目盛りで上の目盛りとぴったりと合っている目盛りを探してその数字をノギスの表記の通り x0.1mm して、コンマ以下の数字とする…なんですよね。 写真では、 上の目盛りで1mm単位で読むと、10mm。 下の目盛りで上の目盛りとぴったりと合っている目盛りは 6 なので、x0.1mm すると、0.6mm。 二つ合わせて、10.6mm。って感じです。
▼メス　削った後　9.8mm	削った後を測ったところ、9.8mmでした。 10.6 - 9.8 = 0.8mm 削ったことになります。
▼オスも削った（上：削る前、下：削った後）	オスも、メスに合わせて同じくらい削りました。 オス・メス両方削る必要があります。 写真は上が削る前、下が削った後です。
▼GIFアニメで改造結果を確認	削る前と削った後の可動域の変化がわかるように、写真を GIF アニメにしました。 シリンダを完全に閉じた状態で、太ももがヒザに近づいているのがわかります。
▼曲げると、外れるギリギリの状態	その状態でヒザを曲げたところです。 ドッキリ！ ヒザをぎゅっと曲げきると、短くしたせいでシリンダーのオスがメスから外れるようになってしまいました。その辺はあるていど検討したけどダメだったか…orz しかし、それは写真のように、内部フレームだけの状態での場合であって、内部フレームに白い装甲を付けたらたぶん（たぶんですが）可動域はせまくなり外れることもなくなるのでは…と思います。あたふた
	伸ばした状態です。
	さらにドッキリ！ Oh! No! 内部フレームだけの全身状態が完成し（説明書通りに組み立てた場合には内部フレームだけの状態にはなりません）、いろいろポーズを付けて遊んでいたら、曲げた状態でオスが外れてそれに気づかず伸ばし状態に戻してしまったようで、オスがメスのふちにぶつかり、オスに負荷がかかって白化してしまいました。折れそう。 写真は組み立てたものを ばらしてオスを取り出したところです。白化してますね。 なんとか折れないでいる様子。 このオスはリバーシブル（表裏同じ）なパーツなので、反転させて再度組み込みました。 …というわけで可動域が広がったことに期待はまだあるものの、問題が起きやすい状態になってしまったのであまりおすすめの改造とは言えません…普通に作ってその状態に満足したほうが良いですよ。

でも、まぁ、個人的には 問題のパーツを反転させて少し具合が良くなったので少し安心していて、可動域の変化が自分の期待通りかどうかを見るのも楽しみで、なんとか大丈夫という感じです。（→大丈夫じゃないです）

2020年10月24日追記：

可動域の変化はそこそこ期待通りでしたが、完成させてみると、ヒザを思い思いに曲げるときにシリンダーのオスメスがあっさりとはずれてしまいます。

紹介した改造は行わないでください。

顔のシール貼り

顔のシール（デカール）は2種類あります。

	バンプレストのマークみたいな部分（黒い部分）に緑の目が最初から描かれている、シール1枚を貼ってOKなタイプと、
	目が描かれていないバンプレストに上から目を貼るという、シール3枚を組み合わせるタイプがあります。 どういう理由で2種類に分けてあるのかが説明書に記載されていなくて、「選べるよ」という指示があるだけ。 たぶん、目が一緒に描かれているほう（上図）は細かい作業が苦手な人向けで、目を上から貼るタイプ（左図）は細かい作業ができる人向けなんだと思います。 きっと、左図のほうがリアルに仕上がるんだろうなと思って、私は左図の方法を選びました。 私は「上から貼るタイプ」と言っていますが、実は説明書には「目を上から貼る」とは書かれていなくて、バンプレストを先に貼って目を上から貼るのか、それとも目を先に貼ってバンプレストを上からかぶせるのかがわからず、しばし迷いました。 が、目を上から貼るのが正解だろうと判断しました。
▼精密な作業	クランプ（洗濯ばさみ みたいなやつ）で固定して、カッターの刃先や、つまようじ、ピンセットを駆使しました。 細かい作業やで！
▼右目をピンセットで…貼る！ぷるぷると震える	こっ細かい！ 昔、1/144 ガンダム（300円）の顔を筆で塗ったのを思い出しました。同じくらい難しい。
▼10倍ル―ぺで、顔のバランスを確認	10倍ルーペごしに撮影。 左右に傾きの差がないか。 左右の離れ具合は正しいか。

「RG νガンダム」の顔のシール貼りは以上のような精密作業で大変でした。

内部フレームだけの状態でポーズ

百聞は一見に如かず、でとりあえず写真を見ればわかります。このガンプラは人間だ！

 
■前後の足の優雅なポーズ
■一本足でも立てる
■キャンドルスピンも可能
■腰のZ型関節がすごい
■おお、この表現力よ

ちなみに、写真の広げた手の平は、そういう形状のパーツで、指の関節は可動しません。

また、説明書通りに組み立てると写真のような「内部フレームのみの状態」にはなりません。

おそらく、装甲を付けると可動範囲はせまくなり、写真のようなポーズは一部できなくなると思われます。

でも、人間も裸であれば可能な限りの可動ができるけど、鎧や甲冑を付けると可動が制限されますよね。それと同じと考えれば、装甲を付けて可動範囲がせまくなるのは当然、自然なことと言えます。

余談ですが、

最初、これらの写真について、フィギュアスケートをネタにして面白おかしく表現しようとしましたが、そういう表現をする側（私）やそれを視聴する人たちは楽しくて良いかもしれないけど、ネタにされた側（たとえばフィギュアスケートの選手の方々）は楽しいと感じるとは限りません。過去に物まね芸人の行き過ぎた物まねで元ネタの人が歌を歌えなくなったという話もあるので、「何かを元ネタにする」という行為は少し考えたほうが良いのかもしれません。とはいえ制限すると自由な発想による自由な表現が委縮してしまうとも言われているので、結局は程度の問題かもしれません。

2020/9/22（火）

RPG試作 -[rpg]

最近、このページ上部の「NO PC WEEK に代わる PC 使用制限のしくみ（β版）」の表の右端「H. 作業内容」にて、「RPG試作」と記入していますが、それがどんなプログラムなのか紹介します。

RPG を開発する際に作ることになる「コマンドメニュー」部分のプログラムを、誰にでも教えられるように可能な限り簡潔に作りたいと私は思っていて、今回の試作はその取り組みの一環です。

▼よくある RPG のよくある「コマンドメニュー」（図は例であり、これが動くプログラムは 記事中にありません）

画面には複数のウィンドウ（選択メニュー）が表示されています。

それぞれのウィンドウは、行いたい１つのコマンド、

「リサリーはどうぐ「なんこう」をラズンに使う」

の各文節、「リサリー」、「どうぐ」、「なんこう」、「ラズン」、「使う」を決めています。

模式図

プログラミングのもとになった模式図です。

クラス Menus は複数の Menu を持っています。これが最初に示した RPG 画面の例の「複数のウィンドウ（選択メニュー）」に対応しています。

各 Menu は「どんな内容のメニューにするか」を定義した menusrc という変数（オブジェクト）を持っています。

この変数（オブジェクト）の中にさらに「ms_argName」という変数があり、これは「コマンドを構成する複数の文節のうちのどの「文節」を決めるのか」を示しています。たとえば「だれの」とか「どうする」とか文節を表す名前です。

result はその選択メニューの選んだ項目です。

そして図の下部のオレンジ色の「script」は「行いたい１つのコマンド」です。

それは１つの関数になっていて、引数として各メニューの選択結果（文節に入る具体的な実物。「リサリー」とか「なんこう」など）を受け取ります。

プログラムリスト

試作は JavaScript で作成しました。

プログラムリスト

このリンクのリンク先の右上の青い「実行」ボタンを押すと、何もない白い画面が出るだけです。

そのとき、CTRL + SHIFT + J を押すと、「コンソール」という画面が開きます。

開いたら、元の白い画面の中央付近をクリックします。

たぶん、[コマンド？]　とコンソールのほうに表示され、

０　どうぐ

１　しらべる

の２つのコマンドが出ると思います。

（あくまでもプログラムの流れを大まかに決める試作品なので、最初に示したようなカッコイイ RPG 画面は出てきません）

キーボードのテンキーではないほうの０を押すと、[ だれの？ ] と表示されます。

以前にも同じような説明をしたと思いますが、現状、０　の選択をすることしか想定していないので、他の番号を押すとどうなるかはわかりません。

０、０、０、、、と押していくと最後に「結果：」と出て、メニューで選んだ内容が、コマンドとして実行されます。

上の模式図をもとにオブジェクト指向を使って（クラスなどを躊躇なく使うという意味）プログラムしました。

現在、だいたいこんな感じかなと思っているところです。

以前から試作を続けていて、「chainTo」だとか「パレット」などと言って、コマンドメニューの実現の方法を紹介してきました。

「chainTo」は名前を変えて「itemsBy」という単語でプログラム中で使われています。

これは、ちょっと難しいですが、たとえば、

というメニューを想定して、メニューを定義する（プログラム中に書く）際に、

「コマンド？」というメニューで「どうぐ」を選択した時点で、つづくメニューは、「だれの？」と、「どのどうぐ？」という2つのメニューであることは予想できます。しかし「どのどうぐ？」というメニューの内容（選択肢）は、前のメニューの「だれの？」が決定するまではどんな内容になるかはわかりません。つまり、実行時はリサリーが持つどうぐのリストがメニューの選択項目として並びますが、定義時点ではそれがリサリーであるとは限らないので、どうぐのリストを並べられません。この「未定」であることを示すために itemsBy という単語を使っています。メニュー定義の中に「itemsBy」の指示があるなら、前のメニューの結果を参照する、という処理になっています。

「パレット」は、「scriptArgs」という名前でプログラム中で使われています。

各メニューが決めるコマンドの文節を最終的なコマンド（関数）の引数へまとめる様子が、絵具のパレットみたいなので「パレット」と呼んでいました。

scriptArgs は連想配列（普通の配列は数字でデータを参照するのに対し、連想配列は名前（キー）でデータを参照します）になっていて、各メニューの ms_argName をキーにして、選択結果を scriptArgs に代入します。ms_argName はコマンドの文節の名前で、「だれの」とか「どうする」とか文節を区別するような名前です。（実際は関数の中で参照しやすいように "charA", "charB", "dougu" という名前になっています）

フローチャート：

フローチャートを作成したのでそれも掲載しておきます。リンク先は PDF です。

フローチャートを作れば、JavaScript に限らず、他のプログラミング言語にも実装しやすいと考えて。

最終的には、ゲームを作るのが好きな小中学生、高校生がRPGの作り方を学べるようなプログラムを目指していますが、現在は躊躇なくオブジェクト指向を使っているし、JavaScript の難しい感じの記述もいくつか使っています。async, await, Promise、そして array.map や array.forEach や => を使った関数みたいな構文（アロー関数）など。

また、今回アップしたプログラムの中で行われていることですが、

メニューの内容定義の前に monsters = new Array(); と書き、

メニューの内容定義の中でその配列 monsters を参照するなら、

以降で monsters を別の新しい配列に置き換えてはいけない、

…とか、そういうの小中学生にわかるんだろうか、と思ったりしています。

JavaScript の Array（配列）のメソッドのなかには新しい配列を作り出すタイプのものがあるので、知らないうちに置き換わっているということが考えられます。JavaScript でなくても他のプログラミング言語でも同様の現象はあると思います。

RPG の基本的なプログラムを示しても、こういうプログラミングの基本について解説をしないと、示したプログラムを活用できないんじゃないかなと思うんです。

「誰にでも教えられるようにもっとも簡潔に作りたい」という私の願いはなかなか難しいです。

（訪問者のどんなニーズと この記事がつながるか）

• RPG 開発におけるコマンドメニューの実装方法について。
• プログラミングの話を聞きたい。
• 日記を読みたい。

セキュリティに対して、上書きしろ -[eiga]

よく映画で、悪役が困ったことになった際、コンピューターに対して何かをやろうとするんだけど

「その権限がない」とコンピューターに言われる場面ってありますよね。

そのときによく聞くセリフで「（権限を）上書きしろ」っていうのがありますが、

そのセリフを聞くたびに私は、「そんなに簡単に上書き出来たら権限の意味ないよな…」って思います。

ひとりごとでした…

上書きしろ！ 上書きしろ～！

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。

2020/9/20（日）

電子工作　通販 -[den]

とどこおっていた「自作 DRAM（メモリ）」や「秋月液晶」の電子工作のために、通販を行いました。

自作 DRAM はそろそろおおづめで、「8ビット4アドレス」を作成します。

秋月液晶は、液晶自体の購入は秋月で何気なく売られていて安くて気軽に購入できます。だから、ちょっと頑張ればできるかなと思ってしまいますが、いざ表示させようとすると一筋縄ではいかない難しい代物だとわかります。

普通のパソコン用モニタと同じような仕様で表示するものであって、気軽な電子工作では表示できません。

（ ちまたではPSP（意味：プレイステーションポータブル）液晶と言われている液晶なので、それなりの実力のある液晶です）

▼液晶　＋　適当なマイコン　では到底表示できません。（16ビットマイコンを使って静止画（それも画像ではなく図形）くらいなら表示できるかも）

ちょっと余談：

1ピクセル当たり 9MHz なので、それが、480x272 ピクセルあるということは、1画面当たり何 Hz で表示するのかと言うと…

9MHz = 9,000,000Hz　→　1 / 9,000,000秒　（1ピクセル当たりにかかる秒数）

1 / 9,000,000秒 × 480 × 272 = ( 480 × 272 ) / 9,000,000秒 =130,560 / 9,000,000秒 = 0.0145秒　（1画面当たりにかかる秒数）

→　1秒/0.0145秒 = 68.96Hz ≒ 70Hz

なんと、一般的なディスプレイのリフレッシュレートになりました☆　へぇ、みたいな。

液晶の説明書（データシート）を見ると、9MHz に限らず、5～12MHz のあいだで良い、とあるので、つまり周波数をソフトウェアで 5～12MHz のあいだで変えられるなら、Windows のコントロールパネルみたいに液晶のリフレッシュレートを変更することもできるってことですかね。

▼液晶　＋　高性能なマイコン　＋　外付けメモリー　＋　適当なマイコン　で何とかならないかと考えたりしましたが、それも実現は難しく…

▼結局 LCDコントローラーという IC を別途購入しました。（秋月では売っていなくてマルツパーツ館で売っていました）

でも、LCDコントローラーの説明書（データシート）を読んだところ、結構難しそうでした。

▼説明書（データシート）を見て、自分用の図解を作成し、理解しようとしました。下図のリンク先は PDF です。（こんなことやってるよという意味での掲載です）

▼とりあえずこんな感じで、組み立てを考えて、通販しました。これが私のいつもの、電子機器の設計のやり方です。

Excel で基板などの写真を基板の形に添ってトリミングして、それを寸法通りに mm 単位で拡大縮小するので、基板上のレイアウトを正確に決められます。

レ点は通販のリストに入れたという確認です。

表示できるのはいつになることやら。。

（訪問者のどんなニーズと この記事がつながるか）

• 秋月電子通商で売られている液晶 ATM043025 の情報。
• 電子回路の話題を読みたい。
• 日記を読みたい。

2020/9/19（土）

歯医者　日記1/2 -[health]

今日も歯医者へ行きました。

となりの診察台に座っていた幼稚園から小学校低学年くらいの男の子はお父さんが付き添いでそばにいましたが、診察前から

「こわい、こわい、、」

と言っていて、いざ診察が始まると、ものすごく わめいて診察を拒否していました。

でも診察は実行されたようでした。

私も同じくらいの年頃の時に、1回だけ同じように泣きわめいたことがあります。

そのときに怖かったのは、

• あおむけにされること（それが予想外であること）
• まぶしいライトで照らされること（それが予想外であること）
• いかにもこれから何かをやる、という雰囲気であること

その3点だったと思います。

小さなお子さんがそういう場で わめかないようにするには、上記3点を事前に教えてあげることではないかと思います。

• あおむけについては、これからこうなるよと予行演習として実際にやってあげること。
• ライトについては、こういうライトで照らすよと、同様にやってあげること。
• これから何かをやる、については、こういう器具を使って口の中をこういうふうにいじるよと、予行演習をしてあげること。

でも、一番怖いのはたくましい身体をした男の先生、または銀縁の眼鏡をかけた男の先生、女の先生でも上記3点がそろえば怖いかもしれない。

事前に子供さんの好きな漫画とかを聞き出しておいて、その先生にその話題を子供さんに話させてあげるとか。

横で見ていてそんなことを考えました。

思えば私が飼ったニャンコたち（2匹）も、去勢・避妊手術を行った際、2匹とも私に必死にしがみついて「ふー！ふー！」と必死に息をしていました。

清潔な室内と、清潔な器具、清潔な服装の何者か（先生）と、これから何かが行われるという雰囲気。

怖くて当然ですね。

経験のない子供さんや、猫たちは、サンタクロースやお化けを信じるがゆえに、これからとんでもないことをされるんだという思いに襲われるんだ、と思いました。サンタクロースもお化けもいないと、科学的にわかっている大人は何をされるのかも痛さの程度もだいたいわかっているので、恐れることもありません。

焼肉なのに100gかよ　日記2/2 -[shopping]

歯医者のあとで立ち寄った肉屋さんで、メンチカツ1個（家に戻ってからの一服用）と、それから今日は4連休初日なので焼肉でもやろうと思って、肉を買いました。

「焼き肉用の肉がほしいと思っていて…」

と言って、店員さんに案内をしてもらおうと期待したんですが、その店員さんは「どの肉が焼き肉におすすめ」と気を利かして案内してくれず。

しかたなく、焼肉として当たり前の「カルビ」の文字を頼りに「牛 カルビ 上」と言いかけて値段を見たら、

１００ｇ　９８０円

ではないですか。

満足するためには少なくとも２００ｇ程度という感覚を私は持っていて、ってことは２００ｇで２０００円ではないか！

と、店員さんにほしい肉の名前を言いながら心の中で思いました。

（瞬間の出来事を長い文章で説明するのはジョジョみたいですね）

買いましたよ２００ｇ。１００ｇじゃ「焼き肉なのに１００ｇかよ」と店員さんに思われそうだったので。

２０００円の肉を買ったことは、頭から排除することに（忘れる、なかったことに）しました。

低所得でいろいろ苦しいと思っている毎日なので。

メンチカツは専用の白い紙袋に入っていてそれを持ちながら添付のソースをかけて食べることができ、おいしく食べられました。

２０００円のほうはこれからです。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。

2020/9/14（月）

テスト（サイトCGI改修）

テスト実行

■要素がすでにあるタイプ

PROGRAM LIST

■要素をそこに作るタイプ

There is no canvas.
PROGRAM LIST

どんな改修をしたのか

私が HTML エディタを使って、日ごろの日記を書く際に、作った JavaScript をそのままの形で（そのままのファイルで何もいじらないで）、

％％com.javascript2:20200914-test/test.js,App,test1％％

とコマンドを記入するだけで、ページ上で実行できるしくみを「サーバー側の CGI」に搭載しました。

（「サーバー側の CGI」とは何かについては後述しています。URL でアクセスできる普通の CGI ファイルではありません）

上記で動いているものは、そのテストです。

▼HTML エディタを使って、日記内にコマンドを書いているところ（上記の「テスト実行」部分を編集している）

図中の、２行あるうちの上のコマンドは、要素がすでにある場合にその要素の ID を指定するだけで JavaScript を実行できるもので、その書式は、

％％com.javascript2:＜.jsファイルへの相対パス＞,＜実行用のクラス名＞,＜すでにある要素のID＞％％

HTMLエディタ上で、レイアウトやデザインを確認しながら作りたいときに使用します。

下のコマンドは、要素がそこにない場合に、作成したい要素名と要素名に続く属性を指定して JavaScript を実行するもので、その書式は、

％％com.javascript1:＜.jsファイルへの相対パス＞,＜実行用のクラス名＞,＜作成したい要素名＞,＜その属性＞％％

HTMLエディタ上で、要素の内容（タグ名と属性）を手動ですばやく記述したいときに使用します。

※一般的に JavaScript と CANVAS 要素はセットで使われることが多いです。そのため、以降の文中で、JavaScript のことを CANVAS と言ったり、CANVAS のことを JavaScript と言ったりする場合があります。またそれを、JavaScript（=CANVAS）と表現したりしています。

そのしくみがなければ、作った JavaScript は

• CANVAS タグをいちいち index.html に書かなくてはいけない。
• 下図のように、訪問者の目に入っていない JavaScript（=CANVAS）は処理を停止しないと CPU パワーを使いすぎてしまう。
  スマートホンにおいては「CPUパワーを使う＝バッテリー消費が高まる」なので、ぜひ停止したほうが良いでしょう。
  
• 他の JavaScript と競合してしまう。
  同じ「ページ」という１つの環境で動作するので、同じ名前の変数や同じ名前のクラス名などは、お互いに書き換え合ってしまう。

という問題があるので、プログラマーがいちいち対処しなくてはなりません。

それを解決したくて改修を行いました。

その実現のために具体的にどんな改修をしたのか

今回の改修は

• 「CANVASの用意が面倒」の問題については、
  ％％com.javascript2:20200914-test/test.js,App,test1％％
  という文字列を自動的に CANVAS タグに置き換えるようにしました。
  自動なので、いちいちタグを書かなくてもよくなりました。
  　
• 「ユーザーの目に入っていない JavaScript を画面外で停止しないと CPU パワーをたくさん使う」問題については、
  JavaScript（=CANVAS）のページ上の位置と、現在ウィンドウで表示しているページの位置を比較して、CANVAS が画面外なら、その JavaScript のタイマー実行処理を停止（clearInterval( timerId ) ）し、画面内なら処理を開始（timerId = setInterval(...) ）するようにしました。
  今まではその都度、この処理を追加していましたが、自動で行われるようになりました。
  　
• 「同じ変数名、クラス名で競合する」問題については、
  これは基本的にそのプログラムを１つのオブジェクト（クラス）にすれば「同じ名前の変数名」については解決されます。
  つまり object1.hensu と object2.hensu と書くことになるので、同じ名前の hensu で競合しません。
  
  しかし、「同じ名前のクラス名」についてはちょっと面倒で、
  そのクラス名に、.jsファイルの日付を付け加えることで、クラス名の競合を回避するようにしました。
  
  たとえば、同じ App というクラス名でプログラムを複数作ってそれらを１つのページに同居させたい場合、サーバー側の CGI で、.jsファイルごとにそのテキストに対して App → App20200919 という置換を行っています。（20200919 はその .jsファイルの作成日で実際は時間まであります）
  それでうまくいきました。
  なお、「同じ App というクラス名でプログラムを複数作ってそれらを１つのページに同居させたい場合」とは、たとえば、あるプログラムのプログラミングの手順を訪問者の方に教えたい場合です。１つのページに複数掲載するからと言って、App1, App2..とクラス名に連番を振るのは面倒なので、この改修はそういう場面でとても有効です。
  
  （余談ですが、もしかしたら、
  
  package1 = {
      class1 = class {
      ...
      }
  }
  package2 = {
      class1 = class {
      ...
      }
  }
  ということができるかもしれませんが、試していません。
  でも、サーバー側で、package1 = ...というくくりを作成する、ということですが、面倒くさそうですよね。。）

上記で動いているテストは、これらの改修が行われています。

この改修によって、思い思いに JavaScript を作成したら、あとは

％％com.javascript2:20200914-test/test.js,App,test1％％

と書いて掲載するだけとなりました。

※ただし、作った JavaScript が１つの.jsファイルで完結する場合のみに対応しています。つまり、２つ以上の.jsファイルをロードするような場合（1つは実行用、他はライブラリである場合）には対応していません。

今後、同じしくみが用意される可能性

昨今のインターネットブラウザは、Adobe FLASH（インターネットブラウザ上で動く、表現力豊かな図やアニメを動かすしくみ）が終了し（現在「終了予定」ですが終了したも同然の状態です）、HTML5 として JavaScript の使用がメジャーになっているので、たぶんそのうち私が紹介したことと同じことを行うしくみが JavaScript の開発側（標準化団体）によって用意されると思います。FLASH は１つのページで複数の FLASH が動いても たしか問題なかったと思うので、JavaScript にもそういうしくみ（名前が競合しないしくみ）が用意されても不思議じゃないですよね。

「サーバー側の CGI で」ってどういうこと？

なお、上記文中で「サーバー側の CGI で」と言っていて何のことかわからない方も多いと思います。

http://test.com/test.cgi

とブラウザの URL 欄に入力すれば、その CGI が動きますが、ここで言っているのはこの CGI のことではありません。

「Apache web server」（アパッチ・ウェブ・サーバー）という WEBサーバーソフトの rewrite という機能を使うと、インターネットブラウザから URL を受け取ったら、それを、test.cgi?＜そのURL＞ に置き換えることができます。

たとえば、インターネットブラウザから

http://test.com/test.html

というURLを受け取ったら、これを、

http://test.com/test.cgi?test.html

にサーバー側で置き換えたうえで、URL を処理させることができます。

この web6047 のサイトではこの機能を利用して、すべての URL が cgi （自作のサーバー側プログラム）を通して処理されるようになっています。

例に示した test.cgi は自作のプログラムなので、受け取った URL についてどう処理しようとプログラマーの自由です。

URL の通りにファイルを読んで、そのまま送っても良いし、ちょっと加工して送ることもできます。

「送る」というのは、たとえば Perl 言語であれば、「print "abc";」と書くことで abc という文字がブラウザへ送られます。

（web6047 のどのページを見ても上部に同じ「月別アイコンメニュー」が表示されるのもそのプログラムによるものです）

そのことを「サーバー側の CGI で」と言っています。

ブラウザから index.html という URL を受け取ったら、それを test.cgi?＜そのURL＞に置き換えて、その test.cgi の中で

index.html を読み取り、index.html 中の

％％com.javascript2:20200914-test/test.js,App,test1％％

という記述を探して処理しています。その処理は、

1. 記述中に指定された .jsファイルを読み、その中で使われているクラス名に日付を追加します。
   （クラス名を書き換えた新しい.jsファイルをサーバーに作成します）
2. index.html に　<script src="その.jsファイル"></script>　を追加
3. また、<canvas id="..."></canvas>　というタグも追加
4. スクロールに関する処理も追加

という内容です。

「Apache web server」は、このウェブページの領域を提供しているさくらインターネットが採用しているウェブサーバー（ソフトウェア）です。

その「rewrite」という機能については、ちょっと時間がないので説明できませんが、WEB検索すると使い方が出てくると思います。（htaccessファイルに記述するとか、ディレクティブという難しい単語が並ぶので、ちょっと難しいかもしれません）

（…記事の書き方を制限するはずだったのに制限できていないな…）

（訪問者のどんなニーズと この記事がつながるか）

• 作った JavaScript を１つの日記ページ上で複数実行させるには？
• プログラミングの話を聞きたい。
• 日記を読みたい。

2020/9/13（日）

先月と今月の扉スクリプト -[javascript]

「壁がスジ状に光った後、そのスジに沿って割れる」という、天空の城ラピュタのシステム崩壊シーンみたいなものを表現しようとしました。

（訪問者のどんなニーズと この記事がつながるか）

• プログラミングの話を聞きたい。
• 日記を読みたい。

2020/9/12（土）

この記事の中間あたりで昆虫「カナブン」のリアルなイラストを掲載しています。虫嫌いのひとはご注意。ここをクリックするとあらかじめ消去します。

入れ歯（日記 1/3） -[health]

今年 2020年の2月ごろに、右の上の奥歯を抜歯して、今日になってようやく入れ歯を入れることができました。

歯を抜いた場合の後処置として、「そのまま」、「インプラント」、「ブリッジ」、「入れ歯」といろいろ選べますが、私は入れ歯にしました。

「そのまま」放置してしまうと、（わかりやすい参考ページ）

• 上下方向の反対側の歯（上の歯なら下の歯。下の歯なら上の歯）が抜歯した空間へ移動してくる。
• 前後方向の歯が抜歯した空間へ傾いてくる。（歯並びが悪くなる）
• 以上に加えて、かみ合わせが悪くなる。（かみ合わせが悪いままだと、将来、残りの歯を次々と失うことになる）

「インプラント」は医療保険がきかないのでウン十万かかり、その後のケアもうまくやらないと雑菌が繁殖してしまうとか。

「ブリッジ」は前後の歯に取付用の加工を行って義歯（読み：ぎし）を固定するので、前後の歯に負担がかかるし、雑菌が繁殖しやすいとか。

そういう説明を聞いて私は「入れ歯」が良いと思いました。

入れ歯は取り出して思い通りに洗浄できると思ったし、なにより私の身体は雑菌にやられやすいと日ごろから思っていたので、ケアの難しいインプラントやブリッジは私には向かないと思いました。

しかし、入れ歯も、健康な歯に比べれば雑菌が増えやすいらしいです。

入れ歯の日々のお手入れとして、いつもの 歯ブラシ と 歯磨き粉 だけで済むのだろうか――――

ドラッグストアで「入れ歯と歯茎のあいだにしこむような殺菌を目的とした塗り薬」みたいなものはないかと探しましたが、そういうものはありませんでした。入れ歯を固定する薬品とか、入れ歯を洗浄する薬剤とか、そういうものばかり。

そういう入れ歯関係のいろいろな商品（有名なポリデントとか）の説明を読んでいて、「入れ歯が原因で前後の歯が傷んでしまう」というのを知りました。

今日の入れ歯を入れてくれた歯医者さんも、そのへんの説明が念入りで、説明の内容がしっかりとしていました。

• 残っている歯を大事にすべきですよ。
• 抜歯した歯は、いちばん強く物を噛める歯でした。
  （ということは、入れ歯にすると、その入れ歯を使って強く噛むことになるので、そのつもりでいたほうが良い？）
• 口の中の雑菌が原因で、身体のいろいろな疾病に結びつくんですよ。動脈硬化、心筋梗塞、糖尿病、肺炎　など。
• 入れ歯は寝る前には外して、朝に取り付けてください。寝ているあいだは唾液が少ない状態なので、ねばねばとしてしまい、雑菌が増えやすいです。

これはあなどらないほうがいいな…　と思って、ドラッグストアでこんな商品を購入しました。

水槽に洗浄液と入れ歯を入れて超音波で洗うというもの。

４０００円くらいしましたが、入れ歯を取り出して歯ブラシで磨くよりも、しっかり洗浄してくれそうなので良いかなと。

せっかく買ったのに役に立たなかった、という結果もあり得ますが、試してみるのも良いかもしれません。

なお、今回入れ歯を入れて、すべての歯が揃った状態になりました。何年ぶりかな。。

あと、「デンタルフロス（糸ようじ）」と「歯間ブラシ I 字型」は既に持っていますが、「歯間ブラシ L 字型」も今日見つけたので買いました。

▼デンタルフロス（糸ようじ）	▼歯間ブラシ I 字型	▼歯間ブラシ L 字型（今日購入）
歯間の歯垢を 効果的に 取り除く	歯間の歯垢を取り除く（前歯用） 私はデンタルフロスが入らないときに補助的に使っています	歯間の歯垢を取り除く（奥歯用）

表面だけ念入りに磨いても、電動歯ブラシで強力に磨いても、さらには洗浄液を使って隅々まで殺菌したと思っても、歯と歯のあいだの歯垢は取れていなくて、それが原因で虫歯になるんだそうです。

歯と歯のあいだの歯垢はデンタルフロスを使って初めて取ることができるようです。デンタルフロスが入らないときは、歯間ブラシを使います。

こんなにいろいろやって、「歯ブラシだけでオッケー」だった時代は何だったんだろうと思います。

カナブン（日記 2/3） -[season]

歯医者の帰りに、スーパーで食料を買い、家の玄関付近に来たところで、首筋にチクッときました。

なんだ？？と思いましたが、1回だけだったのでそのまま玄関に入ると、買い物袋を持った右肩付近に緑色のカナブンがしがみついていました。

べつにカナブンは悪い昆虫ではなく、カブトムシなどと似て比較的おとなしく、見た目もそんなに悪くはありません。しかし、

　←「カナブン」のイラスト

ああ！っと思い！

取り除こうと思いましたが、彼ら昆虫はぎゅっとはつかめない！

払おうとしましたが、けっこう彼らの手足は「かぎ爪」になっていて、簡単に外れない！（優秀な爪じゃないか）

しかたないので、玄関の外に出てシャツを脱ぎましたが、ヤツの姿がない。

いなくなったか、いやそうとは限らないと思いつつ、落ち着いて、買い物を冷蔵庫に入れ始めたところで室内で

「ブーン」

いるじゃないか！

夜中で室内の電灯が付いていたので、あちこちガツンガツンとぶつかって、ガス台の裏に落ちたところ、チリ紙でふわっとすくってやり、外へポイ。

「彼らは悪いやつらじゃないんだよ」と大騒ぎの後で彼らを弁護してやりました。

最初にカナブン（？）がチクッとやったのは、カナブンだったのか、または違う理由だったのかわかりません。カナブンはチクッとはやらない昆虫です。

しいたけ（日記 3/3） -[season]

（デンタルフロス、歯間ブラシ、カナブンと図を作ってきましたが、しいたけの図はもう作れません、疲れた）

今日の買い物で「しいたけ」を買いました。

スーパーの店頭で「本日のお買い得」、「広告の品」といった ふれこみで、大々的に売られていたので買いました。

それにちょっと前に実家で母が出してくれた、丸ごと焼いた「しいたけ」が、肉厚でだいぶおいしかったんです。

無料素材集「PICTCAN」より

「一人暮らし」はかれこれ20年くらいになりますが、しいたけを買ったのは初めてでした。

綺麗な円形ではなく、ぶこつな形で、大きなものが３つ、パックされたものでした。

しいたけを料理したことはないので、どうやって食べるんだ？という状態です。

インターネットで調べればおいしい食べ方が出てきて、それも良いんですが、何でもインターネットで調べればいいのではなく、人に聞いたほうが良いと思って実家の母に電話しました。

教えてもらった食べ方がこれ。

まぁ、簡単なんですが、これを知っているのと知らないのとでは、成功と失敗は分かれると思います。聞いてよかった。

母も「（料理の方法は）もっと聞いてほしい、ボケ防止にもなるし」と言っていました。

しいたけは他の毒キノコとかと違って、毛がふさふさとしていて風合いがよく、カナブンじゃないですが、どこか人間に友好的な印象があるなと思いました。植物も動物も、生物って人間が好めるものは、どこか明らかに違うんですよね。ふさふさしているとか、おとなしいとか。

しいたけの肉厚なところをパクッと食べるのがおいしくて、良かったです。

バターありとバターなしの両方を作りましたが、どちらも良かったです。

ただ、もっと焼いたほうが良かったなと思いました。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい。

webappsrcの確認

1. ％％com.webapp.src:/webappsrccheck.html％％
と記述した場合

webapps/src/default.cssのスタイル指定が効く

<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数

console.log( "文字列" );

}

function Class1() {

//クラス

console.log( "文字列" );

}

Class1.prototype.method1 = function() {

//メソッド

console.log( "文字列" );

}

</script>

</head>

<body onload="onloadx();" style="">

Hello world!<BR>

</body>

</html>

---

2. ＜ｃｏｄｅ＞
％％com.webapp.src:/webappsrccheck.html％％
＜／ｃｏｄｅ＞
と記述した場合

このファイルのcodeのスタイル指定が効く

<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数

console.log( "文字列" );

}

function Class1() {

//クラス

console.log( "文字列" );

}

Class1.prototype.method1 = function() {

//メソッド

console.log( "文字列" );

}

</script>

</head>

<body onload="onloadx();" style="">

Hello world!<BR>

</body>

</html>

---

3.
％％com.webapp.src:/webappsrccheck2.html,/webappsrccheck.html％％
と記述した場合

webapps/src/default.cssのスタイル指定が効く

<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数　コメント変更

console.log( "文字列変更" );

行追加

}

function Class1() {

//クラス　コメント変更

console.log( "文字列変更" );

行追加

}

Class1.prototype.method1 = function() {

//メソッド　コメント変更

console.log( "文字列変更" );

行追加

}

</script>

</head>

<body onload="onloadx();文字列変更" style="">

Hello world!<BR>

HTML追加

</body>

</html>

---

4. ＜ｃｏｄｅ＞
％％com.webapp.src:/webappsrccheck2.html,/webappsrccheck.html％％＜／ｃｏｄｅ＞
と記述した場合

このファイルのcodeのスタイル指定が効く

<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数　コメント変更

console.log( "文字列変更" );

行追加

}

function Class1() {

//クラス　コメント変更

console.log( "文字列変更" );

行追加

}

Class1.prototype.method1 = function() {

//メソッド　コメント変更

console.log( "文字列変更" );

行追加

}

</script>

</head>

<body onload="onloadx();文字列変更" style="">

Hello world!<BR>

HTML追加

</body>

</html>

---

5. リンクで
src?webappsrccheck.html
と記述した場合

webapps/src/default.cssのスタイル指定が効く
開く

---

6. リンクで
src?webappsrccheck2.html,webappsrccheck.html
と記述した場合

webapps/src/default.cssのスタイル指定が効く
開く